<template>
	<div class="header sys-dept">
		<el-form v-if="userInfo.permissions=='1'" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<!-- <el-button v-has="'sys-dept-add'" type="primary" @click="addOrUpdateHandle()">添加
			</el-button> -->
			<!-- <el-button v-has="'sys-dept-delete'" type="danger" @click="delListHandle()">批量删除
			</el-button> -->
			<el-form-item label="类别" prop="declarationType">
				<el-select v-model="dataForm.declarationType" placeholder="请选择" @change="declarationTypeSelect"
					clearable>
					<el-option v-for="item in declarationTypeOptions" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="unitNumber">
				<el-input v-model="dataForm.unitNumber" placeholder="企业编号" clearable />
			</el-form-item>
			<el-form-item class="search-select">
				<div class="block">
					<span class="demonstration"></span>
					<el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" @change="dateChange">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-button type="primary" @click="getDataList">搜索</el-button>
			<el-button type="success" style="position: absolute; right: 30px;" @click="excelAllDataList">导出Excel
			</el-button>
		</el-form>
		<el-form v-if="userInfo.permissions=='1'" :inline="true" :model="dataForm" @keyup.enter.native="downloadZip()">
			<el-form-item class="search-select">
				<div class="block">
					<span class="demonstration"></span>
					<el-date-picker v-model="dateZipValue" type="date" placeholder="选择日期"
						:picker-options="pickerZipOptions">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-button type="primary" @click="downloadZip">压缩包下载</el-button>
			</el-button>
			<el-form-item class="tips" style="margin-left: 20px;color: red; margin-top: -18px;">
				<p style="font-size: 16px !important; line-height: 20px !important; padding: 0 !important;">重要提示：系统在每日凌晨会自动打包当天所有附件。<br>点击可下载昨日或之前的每日附件数据。下载数据量较大，请耐心等待。</p>
			</el-form-item>
		</el-form>
		<template>
			<el-table id="printTest" border :data="tableData.data" v-loading="tableData.loading"
				@selection-change="selectionChangeHandle" @sort-change="tableSortHandle" style="width: 100%"
				row-key="id">
				<!-- <el-table-column type="selection" align="center" width="40" /> -->
				<el-table-column type="index" :index="indexMethod" width="50" />
				<el-table-column prop="declarationType" label="类型">
					<template slot-scope="scope">
						<span v-if="scope.row.declarationType==0">退工</span>
						<span v-else-if="scope.row.declarationType==1">录用</span>
						<span v-else>其他</span>
					</template>
				</el-table-column>
				<el-table-column prop="unitNumber" label="单位编号" />
				<el-table-column prop="unitName" label="单位名称" />
				<el-table-column prop="unitAddress" label="单位地址" />
				<el-table-column prop="area" label="所属区镇" />
				<el-table-column prop="applicant" label="申请人" />
				<el-table-column prop="applicantPhone" label="申请人手机号" />
				<el-table-column prop="nearInTime" label="最近录用时间">
					<template slot-scope="scope" v-if="scope.row.nearInTime">
						{{scope.row.nearInTime | formatDate}}
					</template>
					<template slot-scope="scope" v-else>
						无
					</template>
				</el-table-column>
				<el-table-column prop="nearOutTime" label="最近退工时间">
					<template slot-scope="scope" v-if="scope.row.nearOutTime">
						{{scope.row.nearOutTime | formatDate}}
					</template>
					<template slot-scope="scope" v-else>
						无
					</template>
				</el-table-column>

				<el-table-column prop="createTime" label="创建时间">
					<template slot-scope="scope">
						{{scope.row.createTime | formatDate}}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="资料下载" width="180">
					<slot slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="下载花名册" placement="top">
							<el-button type="primary" size="mini" icon="el-icon-document"
								@click="downLoadDeFile(scope.row)" />
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="下载承诺书" placement="top">
							<el-button type="success" size="mini" icon="el-icon-picture"
								@click="downLoadPrFile(scope.row)" />
						</el-tooltip>
						<el-popconfirm v-if="userInfo.permissions=='1'" title="确定删除吗？"
							@confirm="deleteHandle(scope.row.id)">
							<el-button type="danger" size="mini" icon="el-icon-delete" slot="reference" />
						</el-popconfirm>
					</slot>
				</el-table-column>
			</el-table>
		</template>
		<div style="text-align: right;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="dataForm.pageNum" :page-sizes="[10, 50, 100, 200]" :page-size="dataForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" />
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList()" /> -->
	</div>
</template>

<style lang="css" scoped>
</style>

<script>
	import {
		flowList,
		flowDel
	} from '@/api/enterprise/flow'
	import Blob from '../vendor/Blob'
	import Export2Excel from '../vendor/export2Excel'
	import {
		parseTime,
		salary,
		declarationType
	} from "../vendor/index" //引入已封装的秒转为时间的方法

	export default {
		components: {
			// AddOrUpdate
		},
		data() {
			return {
				userInfo: null,
				dataForm: {
					//当前页
					pageNum: 1,
					//每页显示条数
					pageSize: 10,
					unitNumber: ''
				},
				dateValue: '',
				dateZipValue: '',
				pickerZipOptions: {
					disabledDate(time) {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24);
						return time.getTime() > date || time.getTime() < new Date("2021-09-22");
					},
					
				},
				ids: [],
				tableData: {
					loading: false,
					// 总数
					total: 1,
					// 请求回来的数据
					data: []
				},
				declarationTypeOptions: [{
						value: 1,
						label: '录用'
					},
					{
						value: 0,
						label: '退工'
					}
				],
			}
		},
		created() {
			if (this.$ls.get("unitNumber")) {
				this.dataForm.unitNumber = this.$ls.get("unitNumber")
			};
			if (this.$ls.get("userInfo")) {
				this.userInfo = this.$ls.get("userInfo")
			};
			const date = new Date();
			date.setTime(date.getTime() - 3600 * 1000 * 24);
			this.dateZipValue = date;
			this.getDataList();
		},
		methods: {
			declarationTypeSelect(val) {
				console.log(val)
				this.dataForm.declarationType = val
			},
			// 索引列方法
			indexMethod(index) {
				return (this.dataForm.pageNum - 1) * this.dataForm.pageSize + index + 1;
			},
			// 分页功能
			handleSizeChange(val) {
				this.dataForm.pageSize = val;
				this.getDataList();
			},
			// 分页功能
			handleCurrentChange(val) {
				this.dataForm.pageNum = val;
				this.getDataList();
			},
			// 表格实现多选时的 change 事件
			selectionChangeHandle(params) {
				this.ids = [];
				params.map(item => this.ids.push(item.id));
			},
			tableSortHandle(obj, b) {
				// this.ordMap[obj.prop] = obj.order;
				// let ordList = [];
				// for (let key in this.ordMap) {
				// 	ordList.push({
				// 		prop: key,
				// 		order: this.ordMap[key]
				// 	})
				// }
				// this.dataForm.ordList = ordList;
				// this.searchClick()
			},
			dateChange(value) {
				console.log(value)
				if (value) {
					this.dataForm.startTime = new Date(this.$moment(value[0]).format('YYYY-MM-DD HH:mm:ss'))
					this.dataForm.endTime = new Date(this.$moment(value[1]).add(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
				} else {
					this.dataForm.startTime = null
					this.dataForm.endTime = null
				}
			},
			// 获取数据列表
			getDataList() {
				if (!this.dataForm.unitNumber && this.userInfo.permissions == '0') {
					this.error('提交后方可查询');
					return
				}
				this.tableData.loading = true;
				this.request(flowList, this.dataForm, this, data => {
					console.log(data)
					this.tableData.data = data.records;
					this.tableData.total = data.total;
					this.dataForm.pageNum = data.current;
					this.tableData.loading = false;
				})
			},
			excelAllDataList() {
				if (!this.dataForm.unitNumber && this.userInfo.permissions == '0') {
					this.error('提交后方可查询');
					return
				}
				this.tableData.loading = true;
				let params = this.dataForm
				params.pageSize = 9999;
				this.request(flowList, params, this, data => {
					console.log(data)
					this.exportExcel(data.records);
				})
			},
			exportExcel(list) {
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('../vendor/export2Excel.js'); //此处把路径要写对
					const tHeader = ['类型', '单位编号', '单位名称', '单位地址', '所属区镇',
						'申请人', '申请人手机号', '花名册下载链接', '承诺书下载链接', '创建时间', '修改时间'
					];
					const filterVal = ['declarationType', 'unitNumber',
						'unitName', 'unitAddress', 'area', 'applicant', 'applicantPhone', 'attachment1',
						'attachment2', 'createTime', 'updateTime'
					];
					// 上面的index、nickName、name是tableData里对象的属性
					// const list = this.tableData; //把data里的tableData存到list
					const data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, data, '员工信息表' + this.$moment().format(
						'YYYY-MM-DD HH:mm:ss')); //"列表excel"  是下载后的表名 可修改

					this.tableData.loading = false;
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => {
					v['declarationType'] = declarationType(v['declarationType'])
					v['createTime'] = parseTime(v['createTime'])
					v['updateTime'] = parseTime(v['updateTime'])
					return filterVal.map(j => v[j])
				})
			},
			searchClick() {
				this.dataForm.pageNum = 1;
				this.getDataList();
			},
			delListHandle() {
				if (this.ids.length === 0) return this.error('请先选择');
				this.alert('确定要删除吗？', () => this.deleteHandle());
			},
			deleteHandle(id) {
				let ids = id ? [id] : this.ids;
				console.log(ids)
				this.request(flowDel, ids, this, data => {
					(this.tableData.data.length - ids.length === 1 && this.dataForm.pageNum > 1) &&
					(--this.dataForm.pageNum);
					this.getDataList();
				});
			},
			downLoadDeFile(row) {
				// console.log(row)
				// let a = document.createElement("a");
				// a.href = row.attachment1;
				// a.setAttribute("download", "江苏省用人单位用工参保登记花名册");
				// a.click();
				// console.log(row.unitNumber + '-' + (row.declarationType==1?'录用':'退工')+ '-' +this.$moment(row.createTime).format('YYYY-MM-DD'))
				this.download(row.attachment1, row.unitName + '-' + row.unitNumber + '-' + (row.declarationType == 1 ?
					'录用' : '退工') + '花名册-' + this.$moment(row.createTime).format('YYYYMMDD'));
			},
			downLoadPrFile(row) {
				// console.log(row)
				// let a = document.createElement("a");
				// a.href = row.attachment2;
				// a.setAttribute("download", "用人单位退工停保登记花名册");
				// a.click();
				this.download(row.attachment2, row.unitName + '-' + row.unitNumber + '-' + (row.declarationType == 1 ?
					'录用' : '退工') + '承诺书-' + this.$moment(row.createTime).format('YYYYMMDD'));
			},
			downloadZip(){
				// console.log(this.$moment(this.dateZipValue).format('YYYYMMDD'))
				const dateStr = this.$moment(this.dateZipValue).format('YYYYMMDD')
				// this.download('http://image.szhtj.cn/'+dateStr+'.zip', '录用退工压缩文件-'+dateStr,this);
				
				let a = document.createElement("a");
				a.href = 'http://image.szhtj.cn/'+dateStr+'.zip';
				a.setAttribute("download", '录用退工压缩文件-'+dateStr);
				a.click();
			}

		}
	}
</script>
<style lang="less" scoped>
	/*去除页眉页脚*/
	//  @page{
	//    size:  auto;   /* auto is the initial value */
	//    margin: 3mm;  /* this affects the margin in the printer settings */
	//  }

	//  html{
	//    background-color: #FFFFFF;
	//    margin: 0;  /* this affects the margin on the html before sending to printer */
	//  }

	//  body{
	//    border: solid 1px blue ;
	//    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
	//  }
	/*去除页眉页脚*/
</style>
